<template>
  <article class="article-container markdown-here-wrapper" >
    <keep-alive>
      <transition mode="out-in">
        <Component :is="content" :key="currentName" v-highlight/>
      </transition>
    </keep-alive>
  </article>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import { shallowRef, computed, ComputedRef, watchEffect } from "vue";
import router from "@/router";
const route = useRoute();
const content: any = shallowRef(null);

const currentName: ComputedRef = computed(() => {
  return route.params.name;
});

watchEffect(() => {
  if(route.path.indexOf('/md/')!==-1){
     import("./" + currentName.value + ".md")
    .then((e) => {
      content.value = e.default;
    })
    .catch(() => {
      router.replace("/404");
    });
  }
 
});
</script>
